<template>
  <div>
    <el-dialog title="申请修改本单位车辆编制" :visible.sync="dialogVisible">
      <div style="padding: 20px;background-color: white;">
        <el-row>
          <el-col :span="4">
            <b style="float: right;">编办文件：</b>
          </el-col>
          <el-col :span="20">
            <el-upload
              class="upload-demo ensure ensureButt"
              drag
              :action="webUploadUrl"
              :on-success="onSuccess1"
              :limit="1"
              :on-exceed="onExceed"
              :on-remove="onRemove1"
              :headers="{'Authorization':token}"
            >
              <div class="el-upload__text">
                将文件拖到此处，或
                <em>点击上传</em>
              </div>
            </el-upload>
          </el-col>
        </el-row>
        <br />
        <el-row>
          <el-col :span="4">
            <b style="float: right;">上传附件：</b>
          </el-col>
          <el-col :span="20">
            <el-upload
              class="upload-demo ensure ensureButt"
              drag
              :action="webUploadUrl"
              :on-success="onSuccess2"
              :limit="1"
              :on-exceed="onExceed"
              :headers="{'Authorization':token}"
              :on-remove="onRemove2"
            >
              <div class="el-upload__text">
                将文件拖到此处，或
                <em>点击上传</em>
              </div>
            </el-upload>
          </el-col>
        </el-row>
        <br />
        <el-row>
          <el-col :span="4">
            <b style="float: right;">修改编制原因：</b>
          </el-col>
          <el-col :span="20">
            <el-input
              type="textarea"
              :autosize="{ minRows: 2, maxRows: 4}"
              placeholder="请输入内容"
              v-model="applyForm.mark"
            ></el-input>
          </el-col>
        </el-row>
        <br />
        <el-row>
          <el-col :span="4">&nbsp;</el-col>
          <el-col :span="20">
            <el-button type="primary" @click="apply">保存数据</el-button>
          </el-col>
        </el-row>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { mapGetters } from "vuex";
import { apply } from "@/api/carbz";
export default {
  computed: {
    ...mapGetters(["token"])
  },
  data() {
    return {
      webUploadUrl: "", //文件上传地址
      dialogVisible: false,
      applyForm: {
        bzwjurl: "",
        fileurl: "",
        mark: ""
      }
    };
  },
  created() {
    this.webUploadUrl = this.VUE_APP_BASE_API + "/common/webupload.shtml";
  },
  methods: {
    onExceed() {
      this.$message("只能上传1个文件，请先移除已上传文件再上传");
    },
    onSuccess1(file) {
      if (!file) return;
      console.log(file);
      if (file.error == 0) {
        this.applyForm.bzwjurl = file.url;
      } else {
        this.$message("上传失败，请重试");
      }
    },
    onSuccess2(file) {
      if (!file) return;
      console.log(file);
      if (file.error == 0) {
        this.applyForm.fileurl = file.url;
      } else {
        this.$message("上传失败，请重试");
      }
    },
    onRemove1() {
      this.applyForm.bzwjurl = "";
    },
    onRemove2() {
      this.applyForm.fileurl = "";
    },
    //提交申请/admin/carbz/apply.do
    async apply() {
      if (!this.applyForm.bzwjurl) {
        this.$message("请上传编办文件");
        return;
      }
      if (!this.applyForm.fileurl) {
        this.$message("请上传附件");
        return;
      }
      if (!this.applyForm.mark) {
        this.$message("请填写修改编制原因");
        return;
      }

      let param = {};
      param["mark"] = this.applyForm.mark;
      param["fileurl"] = this.applyForm.fileurl;
      param["bzwjurl"] = this.applyForm.bzwjurl;
      let d = await apply(param);
      if (d.error == 0) {
        this.$message("操作成功");
        setTimeout(() => {
          this.dialogVisible = false;
          this.$parent.fetchData();
        }, 300);
      } else {
        this.$message("操作失败");
      }
    }
  }
};
</script>